<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"/>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/socket.io/2.1.0/socket.io.js"></script>
    <script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js"></script>
  </head>
  <body>
    <style type="text/css">
      .showImgArea {
        width: 324px;
        height: 576px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    </style>
    <div class="container">
      <div class="row">
        <div class="col-sm-4" style="background-color:lavender;">当前Id:</div>
        <div class="col-sm-8" style="background-color:lavender;">
          <input id="currentId" type="text" placeholder="请输入currentId" value="123"/>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4" style="background-color:lavender;">namespace:</div>
        <div class="col-sm-8" style="background-color:lavender;">
          <input id="namespace" type="text" placeholder="请输入currentId" value="firstNameSpace"/>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-4" style="background-color:lavender;">room:</div>
        <div class="col-sm-8" style="background-color:lavender;">
          <input id="room" type="text" placeholder="请输入currentId" value="firstRoom"/>
        </div>
      </div>
 
    <div class="row">
      <div class="col-sm-4" style="background-color:lavender;">
        <div class="btn-group">
          <button id="test" type="button" class="btn btn-primary">测试</button>
          <button id="join" type="button" class="btn btn-primary">加入</button>
          <button id="leave" type="button" class="btn btn-primary">离开</button>
          <button id="showAll" type="button" class="btn btn-primary">显示所有连接</button>
          <button id="captureScreen" type="button" class="btn btn-primary">截图</button>
          <button id="refresh" type="button" class="btn btn-primary">刷新</button>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col" style="background-color:lavender;">
        <img
            class="showImgArea"
            id="showImgArea"
            src="../../public/img/mobileScreenshot.png"
/>
      </div>
    </div>
  </div>
  </div>

  <script>
    function updateImg(imgBase64){
      $("#showImgArea").attr("src", "data:image/png;base64,"+imgBase64)
    }

    

    function getCurrentId() {
      return $("#currentId").val()
    }
    function getNamespace() {
      return $("#namespace").val()
    }
    function getRoom() {
      return $("#room").val()
    }
    function getWebpageData(){
      return {
        currentId:getCurrentId(),
        namespace:getNamespace(),
        room:getRoom(),
      }
    }
    const log = console.log
    window.onload = function () {
      // init
      const socket = io("/", {
        // 实际使用中可以在这里传递参数
        query: {
          room: "demo",
          userId: `client_${Math.random()}`
        },

        transports: ["websocket"]
      })

      socket.on("connect", () => {
        const id = socket.id

        log("#connect,", id, socket)

        // 监听自身 id 以实现 p2p 通讯
        socket.on(id, msg => {
          log("#receive,", msg)
        })
      })

      // 接收在线用户信息
      socket.on("online", msg => {
        log("#online,", msg)
      })

      // 系统事件
      socket.on("disconnect", msg => {
        log("#disconnect", msg)
      })

      socket.on("disconnecting", () => {
        log("#disconnecting")
      })

      socket.on("error", () => {
        log("#error")
      })
      // ===============这里添加新的socket监听 开始=====================================
      socket.on("service2MobileCommand", msg => {
        log("#service2MobileCommand")
        log("msg =")
        log(msg)
        prompt(JSON.stringify(msg))
      })
      socket.on("changeImg", imgBase64 => {
        return;
        log("#changeImg")
        log("imgBase64.length = " + imgBase64.length)
        // 修改图片, 也就是将当前图片设置为手机截图
        $("#showImgArea").attr("src", "data:image/png;base64," + imgBase64)
      })
      socket.on("Dkn3UXSu8_jHvKBmAAHW", data => {
        log("#Dkn3UXSu8_jHvKBmAAHW")
        log("data = " + JSON.stringify(data))
      })
      socket.on("updateImg", data => {
        updateImg(data)
      })
      // ===============这里添加新的socket监听 结束=====================================

      window.socket = socket

    }
    $("#test").click(function () {
      console.log("点击了 #test")
      console.log('socket 开始')
      socket.emit('exchange', {
        target: 'Dkn3UXSu8_jHvKBmAAHW',
        payload: {
          msg : 'test',
        },
      });
      console.log('socket 结束')
    })
    $("#join").click(function () {
      console.log("点击了 #join")
      var data = getWebpageData()
      console.log(data)
    })
    $("#leave").click(function () {
      console.log("点击了 #leave")
    })
    $("#showAll").click(function () {
      console.log("点击了 #showAll")
    })
    $("#captureScreen").click(function () {
      console.log("点击了 #captureScreen")
    })
    $("#refresh").click(function () {
      console.log("点击了 #refresh")
      window
        .location
        .reload()
    })

  </script>
</body>
</html>